import React, { useEffect, useState,useRef } from 'react'
import { Button, Card, Input, Spin, Modal,message } from 'antd'
import RoleInfo from './components/info'
import { IRole } from './types'
import styles from './style.module.less'
import { FormOutlined, DeleteOutlined,ExclamationCircleFilled} from '@ant-design/icons'
import { remoteList, deleteInfo } from '@/api/system/role'
import { IQueryList } from '@/api/index.type'
import UserInfo from '../user/index'
const { confirm } = Modal;
const { Search } = Input;

const Role = (props: any) => {
    const [form, setForm] = useState<IQueryList>({
        roleName: '',
        page: 1,
        size: 100
    })
    const [loading, setLoading] = useState<boolean>(false);
    const [data, setData] = useState<Array<IRole>>([]);
    const [currentItem,setCurrentItem] = useState<IRole>();
    const [eidtInfo,setEditInfo] = useState<IRole | object>();
    const [showModal, setShowModal] = useState<boolean>(false);
    const formRef = useRef<IQueryList>({});
    //初始化
    useEffect(() => {
        formRef.current = {...form};
        search();
    }, [])
    //搜索
    const search = async (): Promise<void> => {
        setLoading(true)
        try {
            let res = await remoteList(formRef.current);
            let {list} = res.data;
            setData(list || [])
        } finally {
            setLoading(false)
        }
    };

    //点击搜索
    const onSearch = (value:string)=>{
        formRef.current = {...form};
        formRef.current['roleName'] = value;
        setForm(formRef.current);
        search();
    }
    //选中某一项
    const selectedItem = (info:IRole)=>{
        setCurrentItem(info)
    }

    //编辑信息
    const showInfo = (info:IRole | object)=>{
        setEditInfo(info)
        setShowModal(true)
    }
    //删除
    const remove = (info:IRole)=>{
        let {roleId,roleName} = info;
        confirm({
            title: '操作提示',
            icon: <ExclamationCircleFilled />,
            content: `确定要删除 ${roleName} 角色?`,
            cancelText: '取消',
            okText: '确定',
            onOk: async () => {
                try {
                    await deleteInfo({ ids: [roleId] });
                    message.success('操作成功')
                    search()
                } catch (err) {
                    message.error('操作失败')
                }
            }
        });
    }

    return (
        <div className='main_body flex-row'>
            <div className={styles.role_side}>
                <Card title="角色列表" extra={<Button type='primary' onClick={()=>showInfo({})}>添加</Button>} style={{ width: '100%' }}>
                    <div className={styles.search}>
                        <Search
                            placeholder="请输入角色名称"
                            allowClear
                            onSearch={onSearch}
                            enterButton
                            />
                    </div>
                    <Spin spinning={loading}>
                        <div className={styles.role_box}>
                            {
                                !loading && data.map((role:IRole)=>{
                                    return role.roleName && (
                                        <div className={`${styles.role_item} flex-row ${currentItem?.roleId==role.roleId && styles.active}`} key={role.roleId}>
                                            <span className={styles.role_name} onClick={()=>selectedItem(role)}>{role.roleName}</span>
                                            <Button className={styles.icon} size='small' type='link' onClick={()=>showInfo(role)}><FormOutlined /></Button>
                                            <Button className={styles.icon} size='small' type='text' onClick={()=>remove(role)} danger><DeleteOutlined /></Button>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </Spin>
                </Card>
            </div>
            <div className={styles.role_main}>
                <Card title="用户列表">
                    <UserInfo params={currentItem} isShowSearch={false} />
                </Card>
            </div>
            {
                showModal && <RoleInfo info={eidtInfo} submit={() => { setShowModal(false); search(); }} close={() => setShowModal(false)} />
            }
        </div>
    )
}
export default Role
